<style lang="stylus" scoped>
.layer {
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 5;
  .layer-bg {
    background-color: rgba(0, 0, 0, 0.5);
    height: 40%;
  }

  .layer-info {
    height: 60%;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    position: relative;

    .layer-info__pro {
      padding-bottom: 10px;
      border-bottom: 1px solid #e5e5e5;

      img {
        width: 100px;
        height: 100px;
        display: block;
        margin-right: 10px;
      }

      span {
        font-family: arial;
        font-size: 16px;
        display: block;
        word-wrap: break-word;
      }

      .text-gray {
        color: #555;
      }
    }

    .number-wrap {
      width: 100%;
      height: 53px;
      line-height: 53px;
      margin-bottom: 20px;
      margin-top: 20px;
      border-bottom: 1px solid #e5e5e5;

      .number {
        height: 36px;
        border-radius: 30px;
        position: relative;

        span {
          outline: 0;
          height: 24px;
          width: 24px;
          font-size: 24px;
          text-align: center;
          outline: none;
          border: none;

          &.decrease {
            background: url('../../../static/img/but_subtract_usable@2x.png') center center no-repeat;
            background-size: 100% 100%;
          }

          &.increase {
            background: url('../../../static/img/but_plus_usable@2x.png') center center no-repeat;
            background-size: 100% 100%;
          }

          &.disabled {
            color: #cfcfcf;
          }
        }

        input {
          height: 24px;
          width: 45px;
          text-align: center;
          font-size: 13px;
          font-weight: 700;
          border: 1px solid #f5f5f5;
          box-sizing: border-box;
          -webkit-appearance: none;
          -moz-appearance: none;
          -o-appearance: none;
          appearance: none;
          margin: 0;
          outline: none;
          border: none;
          color: #fff;
          border-radius: 2px;
          margin: 0 5px;
          background: rgba(255, 137, 156, 1);
        }
      }
    }

    .footer {
      width: 100%;
      height: 45px;
      color: #fff;
      background: rgba(255, 161, 176, 1);
      text-align: center;
      font-size: 18px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      outline: none;
      border: none;
    }

    .layer-close {
      width: 25px;
      height: 25px;
      background: url('../../../static/img/icon_close@2x.png') center center no-repeat;
      background-size: 100% 100%;
    }

    .text-theme {
      margin-top: 10px;
      font-size: 16px;
      color: rgba(255, 161, 176, 1);
    }

    .text-gray {
      font-size: 12px;
      color: rgba(160, 154, 155, 1) !important;
    }

    .address-box {
      width: 100%;
      min-height: 94px;
      padding: 20px 0;
      border-bottom: 1px solid #e5e5e5;
    }

    .address-box__tit {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .address-box__user {
      font-size: 12px;
      color: rgba(102, 99, 99, 1);
      margin-bottom: 7px;
    }

    .address-box__detail {
      i {
        width: 8px;
        height: 10px;
        background: url('../../../static/img/icon_location@2x.png') center center no-repeat;
        background-size: 100% 100%;
        margin-right: 5px;
      }

      font-size: 12px;
    }

    .address-box__wrap {
      width: 25px;
      height: 25px;
      background: url('../../../static/img/icon_arrows@2x.png') center center no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
<template>
  <div>
    <!-- 顶部tab -->
    <!-- <mt-navbar v-model="selected">
          <mt-tab-item id="1">下单</mt-tab-item>
          <mt-tab-item id="2">秒杀专区</mt-tab-item>
          <mt-tab-item id="3">面膜专区</mt-tab-item>
    </mt-navbar>-->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1" v-if="selected=='1'">
        暂无数据
      </mt-tab-container-item>
      <mt-tab-container-item id="2" v-if="selected=='2'">

<!-- 主要！！！！！！！！！！！！！ -->
        <Spike @fn-player-submit="fnPlayerSubmit" @fn-pay-submit="fnPaySubmit" ref="spike"/>


      </mt-tab-container-item>
      <mt-tab-container-item id="3" v-if="selected=='3'">暂无数据</mt-tab-container-item>
    </mt-tab-container>




    <!--layerMask-->
    <!--弹框！！！！！！！！！！！！！！！-->
    <div
      class="layer"
      v-bind:class="{animated:isOpenLayer,slideOutDown:isactive,slideInUp:!isactive}"
      style="z-index: 300"
    >
      <div class="layer-bg" @click="fnOpenOrCloseLayer(false,2)"></div>
      <div class="layer-info flex-display flex-display-column">
        <div class="layer-info__pro flex-display">
          <div class="flex-num-one flex-display flex-display-column">
            <div style="font-size:14px;" class="text-overflow-2">{{goodsItem.describe}}</div>
            <font class="text-gray">数量：{{num}}</font>
            <span class="text-theme">￥:{{(goodsItem.new_price*num).toFixed(2)}}</span>
          </div>
          <span class="layer-close" @click="fnOpenOrCloseLayer(false,2)"></span>
        </div>
        <div @click="fnSelectAddress" class="address-box flex-display flex-center-align">
          <div class="flex-num-one flex-display flex-display-column" v-if="isAddress">
            <div class="address-box__tit">送货地址</div>
            <span class="address-box__user">{{this.name}} {{this.phone}}</span>
            <p class="address-box__detail flex-display flex-center-align">
              <i></i>
              {{this.province}}{{this.city}}{{this.quxian}}{{this.address}}
            </p>
          </div>
          <div class="flex-num-one flex-display flex-center-align flex-center-pack" v-else>
            <span>暂无地址请选择地址</span>
          </div>
          <span class="address-box__wrap"></span>
        </div>
        <div class="number-wrap flex-display flex-center-align">
          <span class="flex-num-one">购买数量</span>
          <div class="number flex-display flex-center-align">
            <span class="decrease" :class="fn_cal_num" @click="fnHandleNum(false)"></span>
            <input type="number" v-model="num" @input="fnChangeValue">
            <span class="increase" @click="fnHandleNum(true)"></span>
          </div>
        </div>
        <button class="footer" @click="setPurchasekill">确定</button>
      </div>
    </div>
  </div>
</template>
    
    <script>
// 最小值
const MIN_NUM = 1;
import axios from "axios";
import { Navbar, TabItem, Cell, Toast, Indicator } from "mint-ui";
import Spike from "@/components/Spike";
import api from "@/fetch/api";
export default {
  name: "information",
  components: {
    Navbar,
    TabItem,
    Cell,
    Spike,
    Toast,
    Indicator
  },
  data() {
    return {
      isPay: false,
      selected: "2", //   默认显示
      isOpenLayer: false, // 是否打开弹窗
      isactive: true, // 是否需要弹窗动画
      num: 1, // 购买价格默认1
      province: "", // 省份
      city: "", // 城市
      quxian: "", // 区域
      address: "", // 详细地址
      phone: "", // 联系电话号码
      name: "", // 用户名称
      goodsItem: {}, // 购买的数据对象
      isAddress: false, // 是否已经存在地址
      xiangou: 0 // 限购数量
    };
  },
  created() {
    this.wxUserInfo = window.localStorage.getItem("wxUserInfo")
      ? JSON.parse(window.localStorage.getItem("wxUserInfo"))
      : "";
    this.fnGetSpike();
  },
  mounted() {
    let value = window.localStorage.getItem("UserAddress")
      ? JSON.parse(window.localStorage.getItem("UserAddress"))
      : "";
    if (!value) {
      this.fnGetUserAddress();
      return;
    }
    this.isAddress = true;
    this.setAddress(JSON.parse(window.localStorage.getItem("UserAddress")));
    if (window.localStorage.getItem("isOpenLayer")) {
      this.isactive = false;
      this.isOpenLayer = true;
      window.localStorage.removeItem("isOpenLayer");
    }
  },
  watch: {
    // 监听弹窗显示或关闭
    isactive(newVal) {
      let bodyBox = document.getElementById("bodyContainer");
      let htmlBox = document.getElementById("htmlContainer");
      htmlBox.className = !newVal ? "hairlines hideHtml" : "hairlines";
      bodyBox.className = !newVal ? "overflow" : "";
      this.goodsItem =
        !newVal && window.localStorage.getItem("goodsItem")
          ? JSON.parse(window.localStorage.getItem("goodsItem"))
          : "";
    }
  },
  destroyed() {
    document.getElementById("bodyContainer").className = "";
    document.getElementById("htmlContainer").className = "hairlines";
  },
  methods: {
    fnChangeValue(e) {
      this.num = e.target.value > this.xiangou ? this.xiangou : e.target.value;
      e.target.value = this.num;
    },
    // 滚动到哪里
    scroll() {
      console.log("滚动");
      setTimeout(function() {
        document.documentElement.scrollTop = 800;
      }, 500);
    },
    fnPlayerSubmit(item, str, orderno, all) {
      console.log("000000", item, all);
      if (str == "change") {
        this.num = all.goods_counts;
        window.localStorage.setItem("change", true);
        window.localStorage.setItem("orderno", orderno);
        this.change = true;
        this.orderno = orderno;
        window.localStorage.setItem("allmsg", JSON.stringify(all));
      } else {
        this.num = 1;
      }

      this.goodsItem = item;
      window.localStorage.setItem("goodsItem", JSON.stringify(item));
      this.isactive = false;
      this.isOpenLayer = true;
    },
    /**
     * @author yang
     * @desc 获取收货地址
     */
    fnGetUserAddress() {
      api
        .getaddress({
          userid: this.wxUserInfo.id,
          get_type: "秒杀区活动"
        })
        .then(err => {})
        .catch(res => {
          if (res.status == 200) {
            if (res.data.results && res.data.results.length > 0) {
              let value = res.data.results[0];
              this.isAddress = true;
              let params = {
                name: value.name,
                number: value.phone,
                address: [value.province, value.city, value.quxian],
                detail: value.address
              };
              window.localStorage.setItem(
                "UserAddress",
                JSON.stringify(params)
              );
              this.setAddress(
                JSON.parse(window.localStorage.getItem("UserAddress"))
              );
            } else {
              let value = window.localStorage.getItem("UserAddress")
                ? JSON.parse(window.localStorage.getItem("UserAddress"))
                : "";
              if (value) {
                this.isAddress = true;
                this.setAddress(
                  JSON.parse(window.localStorage.getItem("UserAddress"))
                );
              }
            }
          }
        });
    },
    setAddress(value) {
      this.city = value.address[1];
      this.quxian = value.address[2];
      this.address = value.detail;
      this.phone = value.number;
      this.name = value.name;
      this.province = value.address[0];
    },
    // 生成订单
    setPurchasekill() {
      if (window.localStorage.getItem("change") == "true") {
        var a = window.localStorage.getItem("orderno");
        let params3 = {
          userid: this.wxUserInfo.id,
          openid: this.wxUserInfo.openid,
          merchant_id: this.goodsItem.merchant_id,
          goods_id: this.goodsItem.id,
          goods_counts: this.num,
          deliver_name: this.name,
          province: this.province,
          city: this.city,
          quxian: this.quxian,
          phone: this.phone,
          address: this.address,
          fee: this.goodsItem.new_price,
          modify_flag: true,
          order_no: window.localStorage.getItem("orderno")
        };
        window.localStorage.setItem("change", false);
        window.localStorage.removeItem('allmsg')
        api
          .purchasekill(params3)
          .then(err => {
            Indicator.close();
          })
          .catch(res => {
            Toast({
              message: res.data.msg,
              duration: 2000,
              position: "top"
            });
            this.$refs.spike.fnGetNopay();
            this.isactive = true;
          });
        this.scroll()

        return;
      }

      if (!this.isAddress) {
        Toast({
          message: "请选择地址",
          duration: 2000,
          position: "top"
        });
        return;
      }
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      let params = {
        userid: this.wxUserInfo.id,
        openid: this.wxUserInfo.openid,
        merchant_id: this.goodsItem.merchant_id,
        goods_id: this.goodsItem.id,
        goods_counts: this.num,
        deliver_name: this.name,
        province: this.province,
        city: this.city,
        quxian: this.quxian,
        phone: this.phone,
        address: this.address,
        fee: this.goodsItem.new_price
      };
      api
        .setPurchasekill(params)
        .then(err => {
          Indicator.close();
        })
        .catch(res => {
          Indicator.close();
          if (res.status === 200) {
            if (res.data.code == 2) {
              Toast({
                message: res.data.msg,
                duration: 2000,
                position: "top"
              });
              this.$refs.spike.fnGetNopay();
              this.isactive = true;
            } else {
              Toast({
                message: res.data.msg,
                duration: 2000,
                position: "top"
              });
            }
          }
        });
      // alert(1)
      window.localStorage.removeItem("allmsg");
      this.scroll();
    },

    /**
     * @author yancheng
     * @desc 获取秒杀商品
     */
    fnGetSpike() {
      const params = {
        type: "ms",
        userid: this.wxUserInfo.id
      };
      api.getGoodsInfo(params).catch(res => {
        console.log(res)
        if(res.data.length>0){
          this.xiangou = res.data[0].per_limit;
        window.localStorage.setItem("xiangou", res.data[0].per_limit);
        }

      });
    },

    /**
     * @author yang
     * @desc 支付
     * @param item {Object} 当前需要付款的数据对象
     */
    fnPaySubmit(item) {
      if(item.order_nos.length > 3) {
         Toast({
            message: '结算只能提交三份订单',
            duration: 2000,
            position: "top"
          });
          return
      }
      Indicator.open({
        text: "支付中...",
        spinnerType: "fading-circle"
      });
      let _this = this;
      if (!this.isPay) {
        this.isPay = true
        api.handleChooseWXPay({
            userid: this.wxUserInfo.id,
            openid: this.wxUserInfo.openid,
            total_fee: item.total_fee,
            order_nos: JSON.stringify(item.order_nos)
          })
          .then(res => {
            this.isPay = false
            Indicator.close();
          })
          .catch(result => {
            Indicator.close();
            
            if (result.data.code == 1) {
              setTimeout(() => {
                this.isPay = false
              },1000)
              this.wxChooseWXPay({
                appId: result.data.params.appId,
                timestamp: result.data.params.timeStamp,
                nonceStr: result.data.params.nonceStr,
                sign: result.data.params.sign,
                package: result.data.params.package,
                callback: function(msg = '') {
                  Toast({
                    message: "支付成功",
                    duration: 2000
                  });
                  _this.$refs.spike.fnGetNopay();
                  _this.$refs.spike.fnGetPay();
                  _this.$refs.spike.toOrderType();
                },
               
              });
            }else {
              this.isPay = false
              Toast({
                message: result.data.msg,
                duration: 2000
              });
            }
          });
          
      }
    },

    /**
     * @author yang
     * @desc 打开选择地址
     */
    fnSelectAddress() {
      this.fnOpenOrCloseLayer(false);
      this.$router.push("/add_address");
    },

    /**
     * @author yang
     * @desc 打开或关闭遮罩层
     * @param {Boolean} isOpen true 打开 false 关闭
     */
    fnOpenOrCloseLayer(isOpen, num) {
      // 如果是取消修改，则删除本地存储
      console.log("isOpen,num", isOpen, num);
      if (num == 2) {
        // window.localStorage.removeItem('allmsg')
        window.localStorage.setItem("change", false);
        window.localStorage.removeItem("allmsg");
      }
      this.isactive = !isOpen;
      this.isOpenLayer = true;
    },

    /**
     * @author yang
     * @param {Boolean} isNum true 添加数量 false 减少数量
     */
    fnHandleNum(isNum) {
      isNum ? this.num++ : this.num > 1 ? this.num-- : 1;
      if (this.num > window.localStorage.getItem("xiangou")) {
        this.num = window.localStorage.getItem("xiangou");
        Toast({
          message: "限购" + this.num + "份",
          duration: 2000,
          position: "center"
        });
      }
    }
  },
  computed: {
    // 禁止最少1
    fn_cal_num() {
      return this.num > MIN_NUM ? "" : "disabled";
    }
  }
};
</script>
    
    
    